layui.use(function(){
    // 获取具体的 layui 模块实例对象 - 便于调用其方法，实现相关的操作
    // 1.获取 table 模块实例对象
    let table = layui.table;
    //获取 layer 模块实例对象
    let layer = layui.layer;
    //获取 Jquery 模块实例对象
    let $ = layui.$;

    //获取 form 模块实例对象
    let form = layui.form;

    // 2.动态渲染表格数据
    table.render({
        // 2.0)设置ID - 便于重载数据
        id:'product',
        // 2.1) 绑定表格节点
        elem: '#productTbl',
        // 2.2)访问服务器程序，获取数据
        url:'list_page_condition.do',

        // 2.3)定义表格各列，以及数据的绑定
        cols: [[
            {field: 'productId', width: 105, title: '商品编号', sort: true},
            {field: 'productName',title: '商品名称'},
            {field: 'productType', width: 100, title: '商品类型'},
            {field: 'productCount', width: 105, title: '商品库存', sort: true},
            {field: 'productPrice', width: 105, title: '商品价格', sort: true},
            {field: 'productImage', width: 200, title: '商品图片'},
            // {field: 'productDate', width: 200, title: '上架时间', sort: true},
            //设置上架时间格式
            {width: 200,title: "上架时间",templet: function(row){
                var d = new Date(row.productDate);
                let year = d.getFullYear();
                let month = d.getMonth()+1;
                let day = d.getDate();
                month = month > 9 ? month:"0"+month;
                day = day > 9 ? day:"0"+day;
                return year+"-"+month+"-"+day;
            }},
            {field: 'productSale', width: 105, title: '商品销量', sort: true},
            // {field: 'productStatus', width: 105, title: '上架状态', sort: true},
            {title: '上架状态', width:150, templet: '#status-switch'},
            {fixed: 'right', title:'操作', width: 200, minWidth: 130, toolbar: '#optionBar'},


        ]],

        page: true, // 是否显示分页
        limits: [5, 10, 15,20],
        limit: 5, // 每页默认显示的数量


        // 2.4)把后台数据转换为 layui 中 table 组件所要求的数据格式，
        // 如果参数名称一致，则可以省略
        /*parseData: function(res){
            return {
                "code": res.code==200 ? 0 : res.code,
                "data": res.data
            };
        }*/
    }) ;


    // 3.监听商品状态的选择 - 是否上架 - 开关操作
    // 状态 - 开关操作
    form.on('switch(demo-templet-status)', function(obj){
        var id = this.value;
        var name = this.name;
        // layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);
        let status = obj.elem.checked ? "1":"0";
        // console.log(status);
        changProductStatus(id,status);
    });

    // 异步请求 当商品状态变化时
    function changProductStatus(productId,status){
        $.ajax("updateStatus.do",{
            data:{
                productId:productId,
                status:status
            },
            success:function(res){
                if(res.code==200){
                    layer.msg(res.msg, {icon: 1});
                    //刷新表格
                    table.reload('product', {
                        page: {
                            // 重新从第 1 页开始
                            curr: 1
                        },
                    });
                }
            }
        })
    }


    //4.监听表格操作按钮
    table.on('tool(test)',function (obj){
        // console.log(obj);
        //获取当前行的数据
        let row =obj.data;
        if(obj.event=='up'){
            // layer.msg("上架");
            layer.confirm('您确定要上架此商品吗？', {icon: 3,title:'上架提示'},function(){
                changProductStatus(row.productId,1);
            }, function(){
                layer.msg('你点击了取消按钮');
            });
        }else if(obj.event=='down'){
            // layer.msg("下架");
            layer.confirm('您确定要下架此商品吗？', {icon: 3,title:'下架提示'},function(){
                changProductStatus(row.productId,0);
            }, function(){
                layer.msg('你点击了取消按钮');
            });
        }else if(obj.event=='show'){
            //1.给表单赋值 - 显示当前行的数据到表单中
            form.val('updateForm', {
                "productId": row.productId,
                "productName":row.productName,
                "productType":row.productType,
                "productPrice":row.productPrice,
                "productStatus":row.productStatus,
                "productDesc":row.productDesc,
                "desc": "Layui 用于更简单快速地构建网页界面"
            });
            //2.弹出修改窗口
            layer.open({
                type:1,
                title:'修改商品',
                area:['50%','35em'],
                resize:false,//弹出层拉伸
                anim: 4,//弹出样式
                isOutAnim:true,//关闭弹出层窗口动画
                content:$("#updateContainer"),
                btn:['修改','取消'],
                btn1:function(index){
                    layer.msg("您点击了修改按钮...")
                },
                btn2:function(index){
                    layer.msg("您点击了取消按钮...")
                },
            });
        }else if(obj.event=='detail'){
            layer.msg("查看详情");
        }
    });


});